import React from 'react'
import {MediaBox, MediaBoxHeader, MediaBoxTitle, MediaBoxDescription, MediaBoxBody, Panel, PanelBody,
	    Cell, CellBody, Button,ButtonArea } from 'react-weui'
export default class UserInfo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            display: 'none',
            display2: 'block',
        }
    }
    componentWillReceiveProps(nextProps) {
        var userId = localStorage.getItem('session');
        if (userId == null) {
            this.setState({
                display: 'block',
                display2: 'none',
            })
        }
    }
	render() {
		return (
             <Panel>
              <Cell href="javascript:;" style={{
                	borderBottom: '1px solid #f2f2f2'
                }} access>
                    <CellBody>
                        我的信息
                    </CellBody>
                </Cell>
                <PanelBody>
                   <MediaBox type="appmsg" href="javascript:void(0);" style={{ paddingBottom: '75px',display:this.state.display2}}>
                        <MediaBoxHeader style={{float:'left'}}><img style={{ borderRadius: '50%'}} src={this.props.accountPic} /></MediaBoxHeader>
                        <MediaBoxBody style={{float:'left'}}>
                            <MediaBoxTitle>{this.props.userName}</MediaBoxTitle>
                            <MediaBoxDescription>
                                已绑定手机号：{this.props.userPhone}
                            </MediaBoxDescription>
                        </MediaBoxBody>
                    </MediaBox>
                    <MediaBox type="appmsg" style={{ padding: '25px', display:this.state.display}}>
	                    <MediaBoxBody style={{
	                    	color: 'orange',
	                    	fontSize: '1.2em',
	                    	textAlign: 'center'
	                    }}>
	                        <i className="iconfont icon-information" style={{ fontSize: '2em' }}></i>
	                        <p>您还未登录，请先登录/注册！</p>
	                    </MediaBoxBody>
                    </MediaBox>
                </PanelBody>
            </Panel>
		);
	}
}
